<template>
	<view class="page-146">
		<customImage imgSrc="/clb/lh/2534/top.png" width="750rpx"></customImage>
		<view class="form-container">
			<uni-forms class="login-form" :model="formData">
				<uni-forms-item class="input-phone">
					<input placeholder="请输入手机号" type="tel" focus maxlength="11" style="font-size: 36rpx" v-model="formData.mobile"
						class="uni-input-input" placeholder-style="color: #989898" />
				</uni-forms-item>
				<view class="login-btn" style="text-align: center">
					<customImage imgSrc="/clb/lh/2534/confirm.png" @click="confirmOrderBtn" width="600rpx">
					</customImage>
				</view>
				<view class="agree-box-new">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="formData.allChecked" style="transform: scale(0.7)" />
							<text style="color: #000000; font-weight: 400; font-size: 26rpx">我已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #927145; font-weight: 400; font-size: 28rpx"
						@click="privatePro('lh2533_statement')">《个人信息授权及保护声明》</text>
					<text style="color: #927145; font-weight: 400; font-size: 28rpx"
						@click="privatePro('lh2533_server')">《会员服务协议》</text>
					<text style="color: #927145; font-weight: 400; font-size: 28rpx" @click="privatePro('lh2534')">《产品说明》</text>
				</view>
			</uni-forms>
		</view>
		<view class="image-bottom">
			<customImage imgSrc="/clb/lh/2534/bottom1.png" width="750rpx"></customImage>
			<customImage imgSrc="/clb/lh/2534/bottom2.png" @click="btnGoLink" width="750rpx"></customImage>
			<customImage imgSrc="/clb/lh/2534/bottom3.png" width="750rpx"></customImage>
		</view>

		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="formData.agreeType" @ok="ok1">
				<template v-slot:custom>
					<view class="">
						①书籍观看方式:点击<uni-link href="https://dlzw.fengxingss.com/" text="【断浪中文】"
							color="blue"></uni-link>即可跳转阅读观看（登录帐号：领取权益的手机号码，默认密码：123456）。如无法跳转书籍阅读可复制此页面去浏览器打开。
					</view>
				</template>
			</per-info>
		</uni-popup>
		<view class="layout-operate">
			<view @click="phone">
				<customImage imgSrc="/clb/lh/2534/phone.png" width="45rpx"></customImage>
			</view>
			<view @click="privatePro('lh2534')">
				<customImage imgSrc="/clb/lh/2534/rule.png" width="45rpx"></customImage>
			</view>
			<view @click="jumpTominiProgram('h5','DuanLangZhongWen')">
				<customImage imgSrc="/clb/lh/2534/equity.png" width="45rpx"></customImage>
			</view>
		</view>


		<view class="arrive-btn" :style="{ display: formData.showHeight > 900 ? '' : 'none' }">

			<customImage imgSrc="/clb/lh/2534/confirm.png" @click="toTop" width="600rpx"></customImage>
		</view>
		<confirm v-if="isShowAgreementConfirm" bgType='wx' @ok="agreementConfirmOkHandler" @cancel="isShowAgreementConfirm = false">
			<template v-slot:text>
				<text class="tip" @click="privatePro('lh2533_statement')">《个人信息授权及保护声明》</text>
				<text class="tip" @click="privatePro('lh2533_server')">《会员服务协议》</text>
				<text class="tip" @click="privatePro('lh2533')">《产品说明》</text>
			</template>
		</confirm>
	</view>
</template>

<script setup>
	// 现在直接就是组合式api 来操作
	import {
		reactive,
		ref,
		onMounted,
		watchEffect,
		watch,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import { uuIds } from '@/utils/login.js';
	import { getProductNum } from '@/utils/commo.js';
	import initApi from '@/apis/init.js';
	import { storeToRefs } from 'pinia';
	import { useCounterStore } from '@/store/counter.js';
	import { useUserStore } from '@/store/user.js';
	import useSendCode from '@/comApi/sendCode.js';
	import useConfirmOrder from '@/comApi/confirmOrder';
	import useCommonHook from '@/hooks/common';
	import paramApi from '@/apis/paramApi.js';
	const { jumpTominiProgram } = useCommonHook();
	const uuIdsInit = uuIds();
	const isShowAgreementConfirm = ref(false);
	const {
		token,
		userInfo
	} = storeToRefs(useUserStore());
	/* dialog */
	const popupPro = ref();
	const twoSure = ref();
	const successRef = ref();
	/* 表单 */
	const formData = reactive({
		mobile: '',
		smsCode: null,
		orderNo: null,
		channelCode: '',
		productCode: '',
		allChecked: false,
		agreeType: 1,
		showHeight: 0,
		url: ''
	});
	const {
		sendCode,
		isSend,
		isTimer,
		isNum
	} = useSendCode(formData);
	const { confirmOrder } = useConfirmOrder(formData);
	const { formatPhone } = storeToRefs(useCounterStore());

	const phone = () => {
		uni.makePhoneCall({ phoneNumber: '400-8825101' //客服
		});
	};
	const agreementConfirmOkHandler = () => {
		formData.allChecked = true;
		isShowAgreementConfirm.value = false;
		confirmOrderBtn();
	};
	const confirmOrderBtn = async () => {
		try {
			// 二次确认
			const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
			if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
			if (!formData.mobile) return uni.utils.toast('请输入手机号');
			if (!formData.allChecked) {
				isShowAgreementConfirm.value = true;
				return;
			}
			//  接下来 就是 下单 然后登录 然后跳转
			const arr = {
				productCode: 'LH2534',
				channelCode: formData.channelCode,
				mobile: formData.mobile,
				orderType: 1, // 1 H5 
				paymentMethod: 2,
				param: paramApi.getParam() || formData.url,
				uuid: uuIdsInit,
				environmentCode: '12',
				scenarioCode: '7'
			};
			const loginRes = await initApi.authRegister({ mobile: formData.mobile });
			if (loginRes.code == 20000) {
				uni.setStorageSync('token', loginRes.data.accessToken);
				userInfo.value.token = loginRes.data.accessToken;
				userInfo.value.mobile = loginRes.data.mobile;
				userInfo.value.username = loginRes.data.username;
				userInfo.value.info = loginRes.data;
				token.value = loginRes.data.accessToken;
			} else {
			
				return uni.utils.toast(loginRes.message);
			}
			const res = await initApi.associateMemberSign(arr);
			if (res.code != 20000) {
				
				return uni.utils.toast(res.message);
			}
			if (res.code == 20000) {
				handleJumpPaySign(res.data);
			} 
		} catch (error) {
			//TODO handle the exception
			
			console.log(error, 'confirmOrderBtn');
		}


	};
	const getTime = () => {
		return new Date().getTime();
	};
/* 微信签约 */
	const handleJumpPaySign = async query => {
		const device = await uni.getSystemInfo();
		let ua = navigator.userAgent.toLowerCase();
		if (ua.includes('micromessenger')) {
			if (device.osName === 'android') {
			let url = 'https://api.zzqz2024.com/api/associateMember/command/evokeBroswer?redirect=' +
				encodeURIComponent(`https://m.fengxingss.com/pages/lhhy/midPage?url=${query.extInfo?.alipaySignUrl}&orderNo=${query.orderNo}&orderTime=${getTime()}`);
			window.location.href = url;
			} else if (device.osName === 'ios') {
				 window.location.href = 'safari-' + encodeURIComponent(`https://m.fengxingss.com/pages/lhhy/midPage?url=${query.extInfo?.alipaySignUrl}`);
			}
		} else {
			window.location.href = query.extInfo?.alipaySignUrl;
		}
	};
	
	onLoad(query => {
		formData.url = location.href;
		paramApi.initData(query);
		const oMeta = document.createElement('meta');
		oMeta.name = 'referrer';
		oMeta.content = 'no-referrer-when-downgrade';

		document.getElementsByTagName('head')[0].appendChild(oMeta);
		formData.channelCode = query.a;
		setTimeout(() => {
			getProductNum(formData.channelCode, 'LH2534', uuIdsInit);
		}, 200);
	});
	watch(
		() => formData.mobile,
		(newVal, oldValue) => {
			const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
			if (isOkMobile) {
				uni.hideKeyboard();
				if (!formData.allChecked) return isShowAgreementConfirm.value = true;
			}
		}
	);
	const ok1 = () => {
		popupPro.value.close();
	};
	const privatePro = type => {
		formData.agreeType = type;
		popupPro.value.open('center');
	};
	const changeAll = val => {
		if (val.detail.value.length > 0) {
			formData.allChecked = true;
		} else {
			formData.allChecked = false;
		}
	};
	const btnGoLink = () => {
		location.href = 'https://dlzw.fengxingss.com';
	};
	onPageScroll(e => {
		formData.showHeight = e.scrollTop;
	});
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 200,
			duration: 300
		});
	};
	const goLink = () => {
		console.log('去哪里');
		uni.navigateTo({ url: '/pages/lhhy/equity' });
	};
</script>

<style lang="scss" scoped>
	.page-146 {
		width: 750rpx;
		margin: 0 auto;
		background-color: #fff6f3;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.confirm {
		.dialog-con-1 {
			position: relative;

			.agree-box {
				position: absolute;
				top: 940rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				width: 530rpx;
				justify-content: center;
			}

			.send-code {
				position: absolute;
				width: 500rpx;
				height: 70rpx;
				top: 240rpx;
				z-index: 100;
				display: flex;
				border: 2rpx solid #fe374f;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 100rpx;

				.uni-input-input {
					width: 290rpx !important;
					margin-left: 40rpx;
				}

				.code-line {
					height: 40rpx;
					width: 2rpx;
					border-left: 2rpx #7a7a7a solid;
					margin-top: 15rpx;
					margin-right: 6rpx;
				}

				.code {
					line-height: 70rpx;
					margin-left: 10rpx;
					height: 70rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 24rpx;
					color: #dc0101;
				}
			}
		}

		.btn-con {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.form-container {
		margin: 0 auto;
		height: 420rpx;
		margin-top: 44rpx;
		width: 750rpx;

		.login-btn {
			margin-top: 40rpx;
			animation: scaleUp 2s infinite;
			/* 动画名称、持续时间、是否无限循环 */
		}

		@keyframes scaleUp {

			0%,
			50% {
				transform: scale(1);
				/* 开始时的缩放比例 */
			}

			25%,
			75% {
				transform: scale(1.05);
				/* 缩放比例最大值 */
			}

			100% {
				transform: scale(1);
				/* 结束时的缩放比例 */
			}
		}

		.uni-forms-item {
			height: 110rpx;
			border: 2rpx solid #000000;
			border-radius: 100rpx;
			box-sizing: border-box;
			width: 600rpx;
			margin: 0 auto;

			.uni-input-input {
				width: 492rpx;
				margin-left: 50rpx;
			}
		}
	}

	::v-deep {
		image {
			vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
		}
	}

	:deep(.uni-checkbox-input) {
		border-radius: 80rpx !important;
	}

	.agree-box-new {
		margin-bottom: 0rpx;
		padding-bottom: 0rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-top: 40rpx;
		justify-content: center;
		flex-wrap: wrap;
	}

	.arrive-btn {
		position: fixed;
		bottom: 20rpx;
		width: 750rpx;
		text-align: center;
	}

	.tip {
		color: #927145;
	}
</style>
<style>
	page {
		height: 100%;
		width: 750rpx;
		margin: 0 auto;
	}

	/* 用户先登录  */
</style>